import  React,{Component} from 'react'
import  '../../css/shop/shop_detail.css'
import { connect } from 'react-redux';


const pic=require('./data.json')
  class  ShopDetail extends   Component{
    constructor(props){
        super(props)

        const id=this.props.location.query.id
        this.state={
            pic:pic.data[id].img[0],
            price:pic.data[id].price,
            count:0,
            id:id
        }

    }
    componentDidMount(){


    }
    sup(){
        var count=this.state.count
        count++
        this.setState({
            count:count
        })

    }
    sub(){
        var count=this.state.count
        if(count>0){
            count--
        }
        this.setState({
            count:count
        })
    }
    addcar(){
        var obj={
            id:this.state.id,
            count:this.state.count,
            price:this.state.price
        }
        var that=this
        var ishave=false
        var flag=false
        var index=""

         var arr=this.props.msg
        if(arr.length==0){
            flag=true
            this.props.msg.push(obj)
        }else{
            arr.forEach(function(v,i){
                if(v.id&&v.id==obj.id){
                    index=i
                    ishave=true

                }
            })
        }

        if(ishave){
            this.props.msg[index].count+=obj.count
        }
        else{
           if(flag){
               return
           }else{
               this.props.msg.push(obj)
           }

        }
    }
    render(){
        return (
            <div className="bg_box">
                <div className="detail_banner"
                style={{background:"url("+this.state.pic+") no-repeat",backgroundSize:"100% 100%"}}
                ></div>
                <p className="detail_price">￥{this.state.price}</p>
                <div className="jj_bx">
                    <span onClick={this.sub.bind(this)}>-</span>
                    <span>{this.state.count}</span>
                    <span onClick={this.sup.bind(this)}>+</span>
                </div>
                <div className="all_money">总价￥
                <span>{this.state.count*this.state.price}</span>
                </div>
                <span className="shop_car" onClick={this.addcar.bind(this)}>加入购物车</span>
            </div>
        )
    }
}

export  default  connect(store=>store)(ShopDetail)